<template>
  <div class="leave-modify-wrap">

    <div class="choose-box">
      <span class="title">员工来源：</span>
      <popup-picker :data="empOriginList" v-model="empOrigin" class="name" placeholder="请选择员工来源"
                    @on-change="selectOrigin"></popup-picker>
      <img src="../in.png" class="pic1" onclick="return false"/>
    </div>

    <div class="lend-money" v-if="onlineLendMoney > 0">
      <span class="money-title">蓝聘线上借支：</span>
      <div class="money-box">
        <span class="money">-{{onlineLendMoney}}元</span>
      </div>
    </div>

    <!--扣款记录-->
    <div class="other-box">
      <div class="lend-money" v-for="(item,index) in withholdList" :key="index"
           @click="editOther(item.withhold,item.withholdMoney,index,item.mark)">
        <span class="money-title">{{item.withhold}}：</span>
        <span class="other-money" :class="{'old-txt':item.mark == 1}">-{{item.withholdMoney}}元</span>
        <img src="../in.png" class="pic1" onclick="return false" v-if="item.mark != 1"/>
      </div>
    </div>

    <div class="content-box4" @click="withHold">
      <img src="./add.png" class="pic2" onclick="return false"/>
      <span class="add">添加扣款记录</span>
    </div>

    <!--补贴记录-->
    <div class="other-box">
      <div class="lend-money" v-for="(item,index) in subsidyList" :key="index"
           @click="editSubsidy(item.subsidy,item.subsidyMoney,index,item.mark)">
        <span class="money-title">{{item.subsidy}}：</span>
        <span class="other-money" :class="{'old-txt':item.mark == 1}">+{{item.subsidyMoney}}元</span>
        <img src="../in.png" class="pic1" onclick="return false" v-if="item.mark != 1"/>
      </div>
    </div>

    <div class="content-box4" @click="subsidy">
      <img src="./add.png" class="pic2" onclick="return false"/>
      <span class="add">添加补贴记录</span>
    </div>

    <div class="btn-box">
      <button type="button" class="btn cancel" @click="nextPage">返回</button>
      <button type="button" class="btn confirm" @click="lookPage">预览</button>
    </div>

  </div>
</template>

<script>
  import {removeSessionStore, setSessionStore} from "../../../config/util";
  import {PopupPicker} from 'vux'

  export default {
    data() {
      return {
        empOrigin: [],
        empOriginList: [["大和", "蓝聘", "上势", "大赢和"]],
        originTypeName: "",
        leaveId: "",
        onlineLendMoney: "",
        oldWithHoldList: [],
        oldSubsidyList: [],
        withholdList: [],//新增扣款记录
        subsidyList: [],//新增补贴记录
        deductContent: "",
        subsidyContent: ""
      }
    },
    created() {
      this.leaveId = this.$route.query.leaveId;
      this.onlineLendMoney = this.$route.query.lendMoney;
      this.originTypeName = this.$route.query.userOrigin;
      this.deductContent = this.$route.query.deductContent;
      this.subsidyContent = this.$route.query.subsidyContent;
      if(this.$route.query.userOrigin){
        this.empOrigin.push(this.$route.query.userOrigin);
      }

      let deductItem = [];
      if (this.deductContent) {//扣款项目
        deductItem = this.deductContent.split(";");
        for (let i = 0; i < deductItem.length; i++) {
          if (deductItem[i]) {
            let obj = {};
            obj.withhold = deductItem[i].split("-")[0];
            obj.withholdMoney = deductItem[i].split("-")[1];
            this.oldWithHoldList.push(obj);
          }
        }
      }

      let subsidyItem = [];
      if (this.subsidyContent) {//补贴项目
        subsidyItem = this.subsidyContent.split(";");
        for (let i = 0; i < subsidyItem.length; i++) {
          if (subsidyItem[i]) {
            let obj = {};
            obj.subsidy = subsidyItem[i].split("-")[0];
            obj.subsidyMoney = subsidyItem[i].split("-")[1];
            this.oldSubsidyList.push(obj);
          }
        }
      }

      //处理新增扣款-补贴
      this.withholdList = JSON.parse(sessionStorage.getItem("withholdList"));
      this.subsidyList = JSON.parse(sessionStorage.getItem("subsidyList"));
    },
    methods: {
      selectOrigin(value) {//员工来源
        this.originTypeName = String(value);
        setSessionStore("userOrigin", this.originTypeName);
      },
      withHold() {//添加扣款
        setSessionStore("subsidy_withhold", "002266");
        this.$router.push({
          path: "/withHold",
          query: {
            "type": 1,
            "leaveId": this.leaveId,
            "lendMoney": this.onlineLendMoney,
            "deductContent": this.deductContent,
            "subsidyContent": this.subsidyContent,
            "userOrigin": this.originTypeName,
          }
        });
      },
      subsidy() {//添加补贴
        setSessionStore("subsidy_withhold", "002266");
        this.$router.push({
          path: "/subsidy", query: {
            "type": 1,
            "leaveId": this.leaveId,
            "lendMoney": this.onlineLendMoney,
            "deductContent": this.deductContent,
            "subsidyContent": this.subsidyContent,
            "userOrigin": this.originTypeName,
          }
        });
      },
      editOther(title, money, index, mark) {//修改/删除扣款记录
        if (mark == 1) {
          return
        }

        setSessionStore("subsidy_withhold", "002266");
        this.$router.push({
          path: "/withhold",
          query: {
            "withhold": title,
            "money": money,
            "type": 2,
            "index": index,
            "leaveId": this.leaveId,
            "lendMoney": this.onlineLendMoney,
            "deductContent": this.deductContent,
            "subsidyContent": this.subsidyContent,
            "userOrigin": this.originTypeName,
          }
        });
      },
      editSubsidy(title, money, index, mark) {//修改/删除补贴记录
        if (mark == 1) {
          return
        }

        setSessionStore("subsidy_withhold", "002266");
        this.$router.push({
          path: "/subsidy",
          query: {
            "subsidy": title,
            "money": money,
            "type": 2,
            "index": index,
            "leaveId": this.leaveId,
            "lendMoney": this.onlineLendMoney,
            "deductContent": this.deductContent,
            "subsidyContent": this.subsidyContent,
            "userOrigin": this.originTypeName,
          }
        });
      },
      nextPage() {//返回
        removeSessionStore("subsidy_withhold");
        removeSessionStore("withholdList");
        removeSessionStore("subsidyList");
        removeSessionStore("userOrigin")
        this.$router.push({path: "/leavehistorydetail", query: {"id": this.leaveId}});
      },
      lookPage() {//预览
        this.$router.push({path: "/leavehistorydetail", query: {"id": this.leaveId, "showBtn": 2}});
      }
    },
    components: {
      PopupPicker,
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .leave-modify-wrap
    wh(100%, 100%)
    background: rgba(242, 242, 242, 1)
    .choose-box
      display: flex
      align-items: center
      wh(100%, 1.28rem)
      border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
      background: #fff
      margin-bottom: 0.267rem;
      .title
        margin-left: 0.32rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
      .pic1
        margin-left: auto
        margin-right: 0.32rem
        wh(0.32rem, 0.32rem)
      .name
        flex: 1
        text-align: right
        height: 0.6rem
        line-height: 0.6rem
        padding-right: 0.253rem
        size-color(0.427rem, #ccc)
      .name >>> .vux-popup-picker-placeholder
        color: rgba(204, 204, 204, 1)
      .name >>> .vux-cell-value
        color: rgba(51, 51, 51, 1)
      .name >>> .weui-cell__ft .vux-cell-placeholder
        color: rgba(204, 204, 204, 1)
      .name >>> .weui-cell__ft .vux-cell-value
        color: rgba(51, 51, 51, 1)
    .lend-money
      fj(space-between, center)
      wh(100%, 1.28rem)
      background: rgba(255, 255, 255, 1)
      border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
      .money-title
        margin-left: 0.32rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
      .other-money
        flex: 1
        text-align: right
        padding-right: 0.267rem
        size-color(0.427rem, rgba(60, 175, 255, 1))
      .pic1
        margin-left: auto
        margin-right: 0.32rem
        wh(0.32rem, 0.32rem)
      .old-txt
        color: #333333
      .money-box
        display: flex
        align-items: center
        flex: 1
        margin-right: 0.32rem
        height: 1.28rem
        .money
          flex: 1
          height: 0.6rem
          line-height: 0.6rem
          text-align: right
          size-color(0.427rem, #333333)

    .content-box4
      fj(center, center)
      margin-bottom: 0.267rem
      wh(100%, 1.28rem)
      background: #FFF
      .pic2
        wh(0.48rem, 0.48rem)
      .add
        margin-left: 0.267rem
        size-color(0.4rem, rgba(60, 175, 255, 1))

    .btn-box
      display: flex
      justify-content: center
      align-items: center
      width: 100%
      height: 1.28rem
      padding-top: 0.96rem
      padding-bottom: 0.64rem
      background: rgba(242, 242, 242, 1)
      .btn
        width: 4.267rem
        height: 1.28rem
        line-height: 1.28rem
        font-size: 0.453rem
        border-radius: 0.16rem
        color: rgba(255, 255, 255, 1)
      .cancel
        margin-right: 0.227rem
        background: #F2F2F2
        color: #3CAFFF
        border: 0.027rem solid rgba(60, 175, 255, 1)
      .confirm
        margin-left: 0.227rem
        background: rgba(60, 175, 255, 1)
</style>
